<template>
	<view class="h-fill pad">
		<u-navbar title="适用门店" titleColor="#fff" backIconColor="#fff" :background="navBg"></u-navbar>
		<view class="store-info">
			<view class="simple-card round-corner">
				<view class="store-info-item" v-for="item in storeList" :key="item.id">
					<view class="uni-flex align-center">
						<text>{{item.name}}</text>
						<view class="uni-flex-extend"></view>
						<view class="uni-flex align-center" v-if="item.distanceDes">
							<image class="store-info-icon2" mode="aspectFit" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_dingwei_juli@2x.png"></image>
							<text class="uni-text-gray">{{item.distanceDes}}</text>
						</view>
					</view>
					<text v-if="item.bizHours" class="uni-text-gray">营业时间：{{item.bizHours}}</text>
					<view class="uni-flex align-center">
						<text class="uni-text-gray uni-ellipsis">{{item.address || '地址待更新'}}</text>
						<view class="uni-flex-extend"></view>
						<image @click="openAddress(item)" class="store-info-icon2" mode="aspectFit" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_dingwei_hong@2x.png"></image>
						<!-- #ifndef H5 -->
						<view class="l-pad r-pad" style="height: 40rpx;">
							<u-line direction="col"></u-line>
						</view>
						<image @click="call(item)" class="store-info-icon2" mode="aspectFit" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_dianhua_hong@2x.png"></image>
						<!-- #endif -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAllStoreList,
		getStoreListByIds
	} from "../api/user.js"
	export default {
		data() {
			return {
				navBg: {
					'background-image': 'linear-gradient(to right, #434AD8, #8E77F5)'
				},
				ticketInfo: {},
				storeList: []
			};
		},
		onLoad(option) {
			this.ticketInfo.id = option.ticketId;
		},
		async onPullDownRefresh() {
			await this.loadData();
			uni.stopPullDownRefresh();
		},
		onShow() {
			this.loadData();
		},
		methods: {
			openAddress(item) {
				uni.openLocation({
					address: item.address,
					latitude: item.latitude,
					longitude: item.longitude
				})
			},
			// #ifndef H5
			call(item) {
				uni.makePhoneCall({
					phoneNumber: item.phone
				})
			},
			// #endif
			async loadData() {
				try{
					this.ticketInfo = await this.$http.getTicketDetail(this.ticketInfo.id);
					var data = {};
					// #ifndef H5
					let [err, loc] = await uni.getLocation({
						type: "gcj02"
					})
          if (err) {
            loc = uni.getStorageSync('userLocation')
          }
          data.userLongitude = loc.longitude;
          data.userLatitude = loc.latitude;
					// #endif
					if (this.ticketInfo.storeId) {
						data.storeIds = this.ticketInfo.storeId;
						this.storeList = await getStoreListByIds(data);
					} else {
						this.storeList = await getAllStoreList(data);
					}
				}catch(e){
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss">
	.store-info {
		&-icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 60rpx;
			margin-right: 8rpx;
		}

		&-icon2 {
			width: 40rpx;
			height: 40rpx;
		}

		&-item {
		}
	}
</style>
